<template>
  <section class="cms-page">
    <h2 class="cms-title">申请列表</h2>
    <el-form
      label-suffix="："
      label-width="50px">
      <el-form-item
        label="类型"
      >
        <el-select v-model="form.type" placeholder="请选择类型">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      v-loading="loading"
      :show-overflow-tooltip="true"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="40">
      </el-table-column>
      <el-table-column
        prop="name"
        label="企业名称"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="申请人名称">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话">
      </el-table-column>
      <el-table-column
        prop="type_text"
        label="申请类别">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
             v-if="scope.row.state === 1"
            @click="ensure(scope.row)"
            type="text">确认</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="show_pagination"
      class="cms-pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page.sync="page"
        @current-change="handleChangePage"
      >
      </el-pagination>
    </div>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-14
   * @Project: eabax
   */
  const url = '/api/v1/applies'
  const types = [{
    label: '全部',
    value: 9
  }, {
    label: '企业名称查询表',
    value: 1
  }, {
    label: '获取注册公司报价',
    value: 2
  }, {
    label: '获取代理记账及方案',
    value: 3
  }, {
    label: '立即代帐',
    value: 4
  },{
    label: '商标注册获取报价',
    value: 5
  }]
  export default {
    name: 'apply',
    data() {
      return {
        list: [],
        page: 1,
        size: 10,
        total: 0,
        form: {
          type: 9
        },
        types: types,
        loading: false
      }
    },
    computed: {
      show_pagination(){
        return this.list.length > 0
      }
    },
    watch: {
      form: {
        deep: true,
        handler(){
          this.getList()
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      handleChangePage(page){
        this.page = page
        this.getList()
      },
      getList() {
        this.loading = true
        return this.$axios.$get(url, {
          params: {
            page: this.page,
            size: this.size,
            type: this.form.type
          }
        })
          .then(response => {
            this.loading = false
            let { total = 0, data = [] } = response
            data.forEach(data_item => {
              types.forEach(type => {
                if(data_item.type === type.value){
                  data_item.type_text = type.label
                }
              })
            })
            this.total = total
            this.list = data
          })
          .catch(response => {
            this.loading = false
            this.$message({
              message: '获取列表失败',
              type: 'error'
            })
          })

      },
      ensure(row){
        this.$confirm('确认？','', {
          type: 'warning'
        })
          .then(res => {
            this.loading = true
            this.$axios.$post('/api/v1/apply/handel', {
              id: row.id
            })
              .then(res => {
                this.loading = false
                this.getList()
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              })
              .catch(res => {
                this.loading = false
                this.$message({
                  message: '操作失败',
                  type: 'error'
                })
              })
          })
      }
    },
    layout: 'cms'
  }
</script>

<style scoped>

</style>
